<template>
  <div class="es-block">
    <Title>顺义区防汛隐患统计图</Title>
    <div style="width: 100%; height: 90%; padding-top: 30px">
      <Chart :option="option" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Title from '../Title.vue'
import Chart from '@/components/chart/Chart.vue'
import allData from '@/assets/data/hot.json'
const option = ref({
  grid: {
    containLabel: false,
  },
  legend: {
    top: 'top',
    textStyle: {
      color: '#eee',
    },
  },
  tooltip: {
    show: true,
  },
  emphasis: {
    itemStyle: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: 'rgba(0, 0, 0, 0.5)',
    },
  },
  series: [
    {
      type: 'pie',
      data: allData,
      label: {
        position: 'inner',
        formatter: '{c}',
      },
    },
  ],
})
</script>

<style lang="scss" scoped>
.es-block {
  width: 100%;
  height: 100%;
}
</style>
